<script setup>
import {
    Edit,
    Delete
} from '@element-plus/icons-vue'
import { ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus'
import { newsCategoryListService, newsListService, newsDeleteService,newsAddService } from '@/api/news.js'
//控制抽屉是否显示
const visibleDrawer = ref(false)
//分页条数据模型
const pageNum = ref(1)//当前页
const total = ref(20)//总条数
const pageSize = ref(3)//每页条数
//数据模型
const newsData = ref({
    categoryId: "",
    title: "",
    summary: "",
    author: ""
})
//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
    pageSize.value = size
    getNews();
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
    pageNum.value = num
    getNews();
}
const title = ref();
const getCategories = async () => {
    let result = await newsCategoryListService()
    categories.value = result.data;
}
const getNews = async () => {
    let params = {
        pageNum: pageNum.value,
        pageSize: pageSize.value,
        title: title.value ? title.value : null
    }
    let result = await newsListService(params)
    tableData.value = result.data.items;
    total.value = result.data.total;
    //处理数据
    for (let i = 0; i < tableData.value.length; i++) {
        let items = tableData.value[i]
        for (let j = 0; j < categories.value.length; j++) {
            if (items.categoryId === categories.value[j].id) {
                items.categoryName = categories.value[j].name
            }
        }
    }
}
const categories = ref([])
const tableData = ref([])
const clearNewsData = () => {
    newsData.value.categoryId = ''
    newsData.value.title = ''
    newsData.value.summary = ''
    newsData.value.author = ''
}

getCategories()
getNews()
const deleteNd = async (row) => {
    ElMessageBox.confirm(
        '确定删除该新闻数据？',
        '温馨提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            let result = await newsDeleteService(row.id)
            ElMessage({
                type: 'success',
                message: result.msg ? result.msg : '删除成功',
            })
            getNews();
        })
        .catch((err) => {
            console.log(err)
            ElMessage({
                type: 'info',
                message: '用户取消删除',
            })
        })
}
const addArticle = async () => {
    let v = await newsAddService(newsData.value);
    ElMessage({
        type: 'success',
        message: '添加成功',
    })
    clearNewsData();
    getNews();
    visibleDrawer.value = false;
}


</script>

<template>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <span>全部新闻</span>
                <el-button class="button" type="primary" @click="visibleDrawer=true">添加新闻</el-button>
            </div>
            
        </template>
        <div class="text item">
            <div style="width: 50vh;">
                <el-form-item label="新闻标题">
                    <el-input v-model="title" placeholder="请输入标题" @change="getNews"></el-input>
                </el-form-item>
            </div>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="id" label="新闻编号" width="180" />
                <el-table-column prop="categoryName" label="分类名称" width="180" />
                <el-table-column prop="title" label="新闻标题" />
                <el-table-column prop="summary" label="新闻摘要" />
                <el-table-column prop="author" label="作者" />
                <el-table-column prop="createDate" label="创建时间" />
                <el-table-column label="操作" width="100">
                    <template #default="{ row }">
                        <el-button :icon=Delete circle plain type="danger" @click="deleteNd(row)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[3, 5, 10, 15]"
                layout="jumper, total, sizes, prev, pager, next" background :total="total" @size-change="onSizeChange"
                @current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end" />
        </div>

        <!-- 抽屉 -->
        <el-drawer v-model="visibleDrawer" title="添加新闻" direction="rtl" size="50%">
            <!-- 添加文章表单 -->
            <el-form :model="newsData" label-width="100px">
                <el-form-item label="新闻分类">
                    <el-select placeholder="请选择" v-model="newsData.categoryId">
                        <el-option v-for="c in categories" :key="c.id" :label="c.name" :value="c.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="新闻标题">
                    <el-input v-model="newsData.title" placeholder="请输入标题"></el-input>
                </el-form-item>
                <el-form-item label="新闻摘要">
                    <el-input v-model="newsData.summary" placeholder="请输入摘要(可为空)"></el-input>
                </el-form-item>
                <el-form-item label="新闻作者">
                    <el-input v-model="newsData.author" placeholder="请输入作者(可为空)"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" :v-loading=mloading
                        @click=addArticle()>发布</el-button>
                </el-form-item>
            </el-form>
        </el-drawer>
    </el-card>
</template>
<style lang="scss" scoped>
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}
</style>